<template>
	<view>
		<view class=" overflow">
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title="头像">
				<template v-slot:right>
					<tm-upload :url="uploadUrl" @change="handleUploadChange">
						<div style="width: 80px; height: 80px; background-color: #f0f0f0;">
							<img src="http://192.168.110.161:9000/bot-nft/mb/b0565cf2-e101-4abf-9561-8d7c72ebdf9e.jpg"
								alt="Avatar" style="width: 80%; height: 80%;">
						</div>
					</tm-upload>
				</template>
			</tm-cell>
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title="昵称" :rightText="nickname"
				@click="showDrawer('bottom')">
			</tm-cell>
			<tm-cell :margin="[0, 0,0,16]" :titleFontSize="30" title="手机号" :rightText="phone">
				<template v-slot:right>
					<tm-text></tm-text>
				</template>
			</tm-cell>


		</view>
		<view class=" overflow">
			<tm-cell :round="3" :margin="[0, 0]" :titleFontSize="30" title="区块链地址" :rightText="nativeAddress">
				<template v-slot:right>
					<tm-text></tm-text>
				</template>
			</tm-cell>
			<tm-cell :round="3" :margin="[0, 0, 0, 16]" :titleFontSize="30" title="操作密码" @click="getSafety()">
			</tm-cell>
		</view>
		<tm-button :round="12" linear="right" linearDeep="dark" label="退出账号"
			style="margin-top: 55%; width: 90%; margin-right: auto; margin-left: auto;"></tm-button>
	</view>
	<!-- 会员昵称抽屉 -->
	<tm-drawer :placement="pos" v-model:show="showWin" title="修改昵称" height="30">
		<tm-input width="6" style="margin: auto;  margin-top: 15px;" v-model="nickname"></tm-input>
		<tm-button :round="12" linear="right" linearDeep="dark" label="保存" style="margin: auto; margin-top: 20px;"
			width="600" @click="updateNick()"></tm-button>
	</tm-drawer>

</template>

<script>
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import tmApp from '@/tmui/components/tm-app/tm-app.vue'
	import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
	import tmText from '@/tmui/components/tm-text/tm-text.vue'
	import tmCheckbox from '@/tmui/components/tm-checkbox/tm-checkbox.vue'
	import tmCell from '@/tmui/components/tm-cell/tm-cell.vue'
	export default {
		data() {
			return {
				id: '',
				localUrl: '',
				uuidAvatar: '',
				nickname: '',
				editNickname: '',
				phone: '',
				account: '',
				nativeAddress: '',

				showWin: false,
				pos: '',
				uploadUrl: "http://localhost:82/bot_nft/app/mb/upload.do"

			}
		},
		onLoad(phone) {

			console.log(phone);
			let phoneDate = phone.data
			this.getMb(phoneDate);

		},
		methods: {
			//上传头像
			handleUploadChange(info) {
				

				let arrayInfo = info[0]
				// console.log(arrayInfo)
				// let date = JSON.parse(arrayInfo.response)
				this.uuidAvatar = arrayInfo.url;
				this.localUrl = arrayInfo.name;
				// console.log(date)


				this.upAvatar();



			},

			showDrawer(params) {
				this.showWin = true;
				this.pos = params;
			},
			//跳转修改密码界面
			getSafety() {
				uni.navigateTo({
					url: '/pages/myPage/safetyCenterPage?data=' + this.id
				});

			},

			//查看用户信息
			getMb(phoneDate) {

				uni.request({
					url: "/app/mb/getMbInfo.do",
					method: 'GET',
					header: { // 设置请求的header
						'content-type': 'application/json', // 指定请求头，比如设置Content-Type
					},
					success: (res) => {
						
						let requ = res.data.data;
						this.uuidAvatar = requ.uuidAvatar;
						this.nickname = requ.nickname;
						this.phone = requ.phone;
						this.account = requ.account;
						this.nativeAddress = requ.nativeAddress;
						this.id = requ.id;


						// 在请求成功时返回的数据
					}

				})

			},
			//修改昵称
			updateNick() {
				
				uni.request({
					url: "/app/mb/" + this.nickname + "/updateNick.do",
					method: 'POST',

					header: { // 设置请求的header
						'content-type': 'application/json', // 指定请求头，比如设置Content-Type
					},
					success: (res) => {
						let requ = res.data.msg;
						uni.showToast({
							title: requ,
							icon: 'tmicon-times-circle', // 显示无图标
							duration: 2000 // 持续时间，单位为毫秒
						});
						this.showWin = false;
						// 在请求成功时返回的数据
					}

				})
			},
			//修改头像
			upAvatar() {
				uni.request({
					url: "/app/mb/updateAvatar.do",
					method: 'POST',

					data: JSON.stringify({
						phone: this.phone,
						avatar: this.localUrl,
						uuidAvatar: this.uuidAvatar

					}),
					header: { // 设置请求的header
						'content-type': 'application/json', // 指定请求头，比如设置Content-Type
					},
					success: (res) => {
						let requ = res.data.msg;
						uni.showToast({
							title: requ,
							icon: 'tmicon-times-circle', // 显示无图标
							duration: 2000 // 持续时间，单位为毫秒
						});

					}

				})
			}
		},
	}
</script>

<style>

</style>